<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>admin | demo</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="../static/css/open-iconic-bootstrap.css" th:href="${iconic}">
    <link rel="stylesheet" href="../static/css/admin.css" th:href="${admincss}">
    <style>
        @font-face {
            font-family: 'Icons';
            src: url('fonts/open-iconic.eot');
            src: url('fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('fonts/open-iconic.woff') format('woff'), url('fonts/open-iconic.ttf') format('truetype'), url('fonts/open-iconic.otf') format('opentype'), url('fonts/open-iconic.svg#iconic-sm') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">SpringBoot demo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <!-- List all -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                   aria-expanded="false">List</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0)" id="listCustomers">Customer</a>
                </div>
            </li>

            <!-- Add -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                   aria-expanded="false">Add</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0)" data-toggle="modal" data-target="#addOrUpdateCustomerModal" id="addCustomer">Customer</a>
                </div>
            </li>

            <!-- Source code repository -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                   aria-expanded="false">Source Code</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="https://git.ncucoder.com/hsowan/SpringBoot-demo">Gogs</a>
                    <a class="dropdown-item" href="https://github.com/hsowan/SpringBoot-demo">GitHub</a>
                    <a class="dropdown-item" href="https://gitee.com/NCUCoder/SpringBoot-demo">Gitee</a>
                </div>
            </li>
        </ul>
    </div>
</nav>



<div class="container" id="content">
    <div class="text-center">
        <h3 id="tableTitle">This is table title.</h3>
    </div>
    <div class="row">

        <!-- Customer table -->
        <table class="table table-hover" id="customerTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>CREATE TIME</th>
                <th>USERNAME</th>
                <th>PASSWORD</th>
                <th>AGE</th>
                <th>OPERATIONS</th>
            </tr>
            </thead>
        </table>

    </div>

    <!-- Pagination -->
    <div class="row">
        <nav aria-label="...">
            <p id="currentPageIndex" style="display: none;"></p>
            <div id="pagination"></div>
            <h5>共<span class="badge badge-success" id="getCount"></span>条记录</h5>
        </nav>

    </div>
    <div class="row">
        <div class="alert" role="alert" style="display: none" id="msg">
            This is a primary alert—check it out!
        </div>
    </div>

</div>

<!-- Add or update customer modal -->
<div class="modal fade" id="addOrUpdateCustomerModal" tabindex="-1" role="dialog" aria-labelledby="addOrUpdateCustomerLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addOrUpdateCustomerLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeAddCustomerModal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="username">Username:</label>
                        <input type="text" class="form-control" id="username">
                    </div>
                    <div class="form-group">
                        <label for="password">Password:</label>
                        <input type="password" class="form-control" id="password">
                    </div>
                    <div class="form-group">
                        <label for="age">Age:</label>
                        <input type="text" class="form-control" id="age">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirmAddOrUpdateCustomer">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteLabel">Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeDeleteCustomerModal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Make sure that you will delete it forever!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirmDeleteCustomer">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div class="fixed-bottom text-center">
    &copy; 2019 ncucoder.com
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script src="../static/js/admin.js" th:src="${adminjs}"></script>
</body>
</html>